<!--  -->
<template>
  <div class="padding-sm">
    <el-pagination
      :current-page="page.current"
      :page-size="size"
      background
      layout="total, sizes,prev, pager, next,jumper"
      :page-sizes="[ 50, 80, 100 ]"
      :total="total"
      @sizeChange="page.sizeChange"
      @currentChange="page.currentChange"
    />
  </div>
</template>

<script setup>
import { defineProps, reactive, watch, watchEffect, defineEmits } from "vue"
const emit = defineEmits(["update:size", "update:current", "change"])
const props = defineProps({
    current: {
        type: Number,
        default: 50,
    },
    size: {
        type: Number,
        default: 50,
    },
    total: {
        type: Number,
        default: 0,
    },
})
const page = reactive({
    current: props.current,
    size: props.size,
    sizeChange(e) {
        emit("update:size", e)
    },
    currentChange(e) {
        emit("update:current", e)
    },
})
watchEffect(() => {
    page.current = props.current
    page.size = props.size
    emit("change")
})
</script>

<style lang="scss" scoped></style>
